<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>slot</title>
</head>
<body>

    <div id="app">
        <todo>
            <todo-title slot = "todo-title" :title ="title"></todo-title>
            <todo-item slot = "todo-item" v-for = "(item,index) in todoItem"
                       :item="item" v-bind:index="index"
                       v-on:remove="removeItems(index)"
                        :key="index"></todo-item>
        </todo>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

    <script>
        Vue.component("todo",{
            template: '<div>\
                            <slot name = "todo-title"></slot>\
                            <ul>\
                                <slot name = "todo-item"></slot>\
                             </ul>\
                         </div>'
        });

        Vue.component("todo-title",{
            props:["title"],
            template: '<div>{{title}}</div>'
        });

        Vue.component("todo-item",{
            props:["item","index"],
            template: '<li>{{index}}=={{item}} <button @click="remove">删除</button></li>',
            methods: {
                remove:function () {
                    this.$emit("remove","index");
                }
            }
        });

        var vm = new Vue({
            el:"#app",
            data:{
                title:"hahaha",
                todoItem:["java","go","python"]
            },
            methods:{
                removeItems:function (index) {
                    this.todoItem.splice(index,1) //一次删除一个元素
                }
            }
        });
    </script>
</body>
</html>